<template>
	<view class="lay-root">
		<scroll-view class="lay-content flex-v" scroll-y="true">
			<view :class="'lay-item ' + (index == selectIndex ? 'image-border' :'') " v-for="(item,index) in photoList" :key="index"
				@click="onItemClick(item,index)">
				<fr-image class="item-image" loading-ing-img="oblique-light" 
					:src="item.photo_path" loading-error-img="/static/logo.png"></fr-image>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import FrImage from '@/components/fr-image/fr-image.vue'
	export default {
		components:{
			FrImage
		},
		
		props: {
			photoList: {
				type: Array
			},
		},
		
		data() {
			return {
				selectIndex: 0,
			}
		},
		
		methods:{
			onItemClick(item,index) {
				this.selectIndex = index;
			},
			
			getSelectImage() {
				return {
					index: this.selectIndex,
					data: this.photoList[this.selectIndex]
				};
			}
		}
	}
</script>

<style lang="scss" scoped>
	.lay-root {
		position: relative;
		height: 100%;
	}
	
	.lay-content {
		position: relative;
		box-sizing: border-box;
		align-items: center;
		height: 100%;
		padding: 15upx;
	}
	
	.lay-item {
		box-sizing: border-box;
		width: calc(100% - 0upx);
		margin-bottom: 10upx;
		padding: 2px;
	}
	
	.image-border {
		border: 1px solid #1890FF;
	}
	
	.item-image {
		width: 100%;
		height: 150upx;
	}
</style>
